<template>
  <h1 class="mod-title">
      <span v-if="pay.type == 'wx'" class="ico_log ico-3"></span>
      <span v-else class="ico_log ico-4"></span>
  </h1>


  <div class="mod-ct">
    <div class="order"></div>

    <div style="margin-top: 10px;">
        <span style="color: red;">提示：{{notice}}</span>
    </div>

    <div class="amount" id="money">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{{pay.price}}</span>元
        <span onclick="copy" style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span>
    </div>

    <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
        <div data-role="qrPayImg" class="qrcode-img-area">
            <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
            <div style="position: relative;display: inline-block;">
              <img id="imgCode" v-if="pay.type == 'wx'" :src="pay.wxcode" style="width: 220px;" />
              <img id="imgCode" v-else :src="pay.zfbcode" style="width: 220px;" />
            </div>
        </div>
    </div>

    <div class="time-item" style="padding-top: 10px">
        <div class="time-item" id="msg">
            <h1 class="overtime">订单名称：<span>{{pay.name}}</span></h1>
        </div>

        <div class="time-item">
            <h1>订单号:<span>{{pay.code}}</span></h1>
        </div>

        <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
        <strong id="minute_show">{{minutes}}分</strong>
        <strong id="second_show">{{seconds}}秒</strong>
        <div class="time-item"></div>
    </div>

    <div class="tip">
        <div class="ico-scan"></div>
        <div class="tip-text">
          <p id="showtext">{{pay.type == 'wx' ? '打开微信[扫一扫]' : '打开支付宝[扫一扫]'}}</p>
        </div>
    </div>
  </div>
</template>

<script setup>

  const {proxy} = getCurrentInstance()
  let business = proxy.$business
  let payid = proxy.$route.query.payid ? proxy.$route.query.payid: 0
  let pay = ref({})
  let notice = ref('付款金额要与显示的金额一致，否则后果自负')
  let maxtime = 3 * 60; //过期秒数
  let minutes = ref(3) //分钟
  let seconds = ref(0) //秒
  let timer = null //定时器变量
  let PayTimer = null; //检查支付状态

  onMounted(() => {
    PayInfo()
  })

  //查询支付记录
  const PayInfo = async () =>
  {
    var result = await proxy.$POST({url: '/pay/info', params: {payid}})

    if(result.code == 0)
    {
      proxy.$fail({
        message: result.msg,
        onClose: () => proxy.$router.go(-1)
      })
      return false
    }

    pay.value = result.data
    
    timer = setInterval(autoplay, 1000)
    PayTimer = setInterval(check, 3000)
  }

  //倒计时
  const autoplay = () => 
  {
    if(maxtime >= 0) //未结束
    {
      minutes.value = Math.floor(maxtime / 60);
      seconds.value = Math.floor(maxtime % 60);
      maxtime--;

    }else
    {
      //倒计时结束了
      clearInterval(timer)
      maxtime = 3 * 60 //恢复
      pay.value.wxcode = pay.value.zfbcode = '/assets/pay/images/qrcode_timeout.png'

      //弹框结束
      proxy.$fail('订单已失效，请手动关闭页面，请重新下单')
      notice.value = '订单已失效，请手动关闭页面，请重新下单'
    }
  }

  //检查支付状态
  const check = async () => 
  {
    var result = await proxy.$POST({url: '/pay/info', params: {payid}})

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    if(result.data.status == '1')
    {
      clearInterval(timer)
      clearInterval(PayTimer)

      proxy.$success({
        message: '支付成功',
        onClose: () => proxy.$router.push(result.data.jump)
      })
    }
  }
</script>


<style>
    #app {
      background: #f7f7f7;
      height: 100%;
      max-width: 640px;
      min-width: 300px;
      min-height: 100%;
      margin: 0 auto;
  }
</style>

<style scoped>
  .mod-title {
      text-align: center;
      border-bottom: 1px solid #ddd;
      background: #fff;
  }

  h1 {
      font-family: "微软雅黑";
      font-size: 12px;
      margin: 5px 0;
      padding-bottom: 2px;
  }

  .ico_log {
      display: inline-block;
      width: 130px;
      height: 38px;
      vertical-align: middle;
      margin-right: 7px;
  }

  .ico-1 {
      background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
      background-size: cover;
  }

  .ico-2 {
      background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
  }

  .ico-3 {
      background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
      background-size: cover;
      margin-top: 5px;
      margin-bottom: 5px;
  }

  .ico-4 {
      background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
      background-size: cover;
      margin-top: 5px;
      margin-bottom: 5px;
  }

  .ico-7 {
      background: url("../images/udst.jpg") no-repeat;
      background-size: cover;
      margin-top: 5px;
      margin-bottom: 5px;
  }

  .mod-title .text {
      font-size: 20px;
      color: #333;
      font-weight: bold;
      vertical-align: middle
  }

  .mod-ct {
      min-width: 300px;
      max-width: 640px;
      margin: 0 auto;
      margin-top: 15px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      background: #fff url("/assets/pay/images/wave.png") top center repeat-x;
      text-align: center;
      color: #333;
      border: 1px solid #e5e5e5;
      border-top: none
  }

  .mod-ct .order {
      font-size: 20px;
      padding-top: 10px
  }

  .mod-ct .amount {
      font-size: 18px;
      margin-top: 10px;
      margin-bottom: 20px;
  }

  .mod-ct .amount2 {
      font-size: 25px;
  }

  .moneySize {
      font-size: 20px;
      color: #f00;
  }

  .mod-ct .qr-image {
      margin-top: 30px
  }

  .mod-ct .qr-image img {
      width: 230px;
      height: 230px
  }

  .mod-ct .detail {
      margin-top: 10px;
      padding-top: 0px;
      padding-bottom: 10px;

  }

  .mod-ct .detail .arrow .ico-arrow {
      display: inline-block;
      width: 20px;
      height: 11px;
      background: url("../images/wechat-pay.png") -25px -100px no-repeat
  }

  .mod-ct .detail .detail-ct {
      display: none;
      font-size: 12px;
      text-align: right;
      line-height: 28px
  }

  .mod-ct .detail .detail-ct dt {
      float: left
  }

  .mod-ct .detail-open {
      border-top: 1px solid #e5e5e5
  }

  .mod-ct .detail .arrow {
      padding: 6px 34px;
      border: 1px solid #e5e5e5
  }

  .mod-ct .detail .arrow .ico-arrow {
      display: inline-block;
      width: 20px;
      height: 11px;
      background: url("../images/wechat-pay.png") -25px -100px no-repeat
  }

  .mod-ct .detail-open .arrow .ico-arrow {
      display: inline-block;
      width: 20px;
      height: 11px;
      background: url("../images/wechat-pay.png") 0 -100px no-repeat
  }

  .mod-ct .detail-open .detail-ct {
      display: block
  }

  .mod-ct .tip {
      margin-top: 20px;
      border-top: 1px dashed #e5e5e5;
      padding: 10px 0;
      position: relative
  }

  .mod-ct .tip .ico-scan {
      display: inline-block;
      width: 56px;
      height: 55px;
      background: url("/assets/pay/images/wechat-pay.png") 0 0 no-repeat;
      vertical-align: middle;
  }

  .mod-ct .tip .tip-text {
      display: inline-block;
      vertical-align: middle;
      text-align: left;
      margin-left: 23px;
      font-size: 16px;
      line-height: 28px;
  }

  .mod-ct .tip .dec {
      display: inline-block;
      width: 22px;
      height: 45px;
      background: url("../images/wechat-pay.png") 0 -55px no-repeat;
      position: absolute;
      top: -23px
  }

  .mod-ct .tip .dec-left {
      background-position: 0 -55px;
      left: -136px
  }

  .mod-ct .tip .dec-right {
      background-position: -25px -55px;
      right: -136px
  }

  .foot {
      text-align: center;
      margin: 30px auto;
      color: #888888;
      font-size: 12px;
      line-height: 20px;
      font-family: "simsun"
  }

  .copyRight {
      text-align: center;
      color: #888888;
      margin-bottom: 1px;
  }

  .copyRight a {
      color: #888888;
  }

  h1 {
      font-family: "微软雅黑";
      font-size: 12px;
      margin: 5px 0;
      padding-bottom: 2px;
  }

  .time-item strong {
      background: #3ec742;
      color: #fff;
      line-height: 25px;
      font-size: 15px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }

  .item-title {
      background: none;
      line-height: 25px;
      font-size: 24px;
      padding: 0 10px;
      float: left;
  }

  .paybtn {
      display: inline-block;
      width: 100%;
      height: 80px;
      vertical-align: middle;
      padding-top: 10%;
      margin-right: 7px
  }


  .submit_alipay {
      font-size: 16px;
      font-family: Arial;
      font-weight: normal;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid #84bbf3;
      padding: 9px 76px;
      text-decoration: none;
      background: -moz-linear-gradient(center top, #79bbff 105%, #378de5 0%);
      background: -ms-linear-gradient(top, #79bbff 105%, #378de5 0%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
      background: -webkit-gradient(linear, left top, left bottom, color-stop(105%, #79bbff), color-stop(0%, #378de5));
      background-color: #79bbff;
      color: #ffffff;
      display: inline-block;
      text-shadow: 1px 1px 0px #528ecc;
      -webkit-box-shadow: 0px 0px 0px 0px #bbdaf7;
      -moz-box-shadow: 0px 0px 0px 0px #bbdaf7;
      box-shadow: 0px 0px 0px 0px #bbdaf7;
  }

  .submit_alipay:active {
      position: relative;
      top: 1px;
  }

  .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      width: 80%;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
  }

  .btn:focus,
  .btn:active:focus,
  .btn.active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
  }

  .btn:hover,
  .btn:focus {
      color: #333;
      text-decoration: none;
  }

  .btn:active,
  .btn.active {
      background-image: none;
      outline: 0;
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  }

  .btn.disabled,
  .btn[disabled],
  fieldset[disabled] .btn {
      pointer-events: none;
      cursor: not-allowed;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
      box-shadow: none;
      opacity: .65;
  }

  .btn-primary {
      color: #fff;
      background-color: #428bca;
      border-color: #357ebd;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .open>.dropdown-toggle.btn-primary {
      color: #fff;
      background-color: #3071a9;
      border-color: #285e8e;
  }

  .btn-primary:active,
  .btn-primary.active,
  .open>.dropdown-toggle.btn-primary {
      background-image: none;
  }

  .btn-primary .badge {
      color: #428bca;
      background-color: #fff;
  }

  .f-bold {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
  }

  /* This css button was generated by css-button-generator.com */
  @media screen and (max-width: 768px) {
      /*body,.body {*/
      /*max-width: 100%;*/
      /*min-width: 100%;*/
      /*min-height: 100%;*/
      /*width: 100%;*/
      /*}*/
      /*.mod-title {*/
      /*height: 18rem;*/
      /*line-height: 18rem;*/
      /*}*/
      /*.ico_log {*/
      /*width: 40%;*/
      /*height: 12rem;*/
      /*margin-top: 3rem;*/
      /*}*/
  }
</style>